<template>
  <div id="app">
    <Head>岗位推荐</Head>
    <div class="box">
      <div class="listHead">
      </div>
      <div class="list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="listCard"
                 @click="listClick(item.id)"
                 v-for="(item,index) of list"
                 :key="index">
              <div class="listImg">
                <img :src="item.logo_src ? item.logo_src : require('@/assets/images/empty_logo.jpg')" :alt="$store.state.config.sitename">
              </div>
                <div class="listCon">
                <span class="listTitle">{{ item.subject_name }}</span>
                <span class="listNum">参加企业 <b class="color1">{{ item.company_num }}</b> 家，可投职位 <b class="color2">{{ item.job_num }}</b> 个</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>

      <div class="footer">找工作，招人才，就上{{ $store.state.config.sitename }}<br>未经书面授权，不得转载本网站所有招聘信息<br><span v-if="$store.state.config.contact_tel">客服电话：{{ $store.state.config.contact_tel }}</span></div>

    </div>
  </div>
</template>

<script>
  import http from '@/utils/http'
  import api from '@/api'
    export default {
        name: "dailyList",
      data(){
          return{
            list:[],
            loading:false,
            finished:false,
            refreshing:false,
            headerlogo:'',
            params:{
              page:1,
              pagesize:10
            },
            total:0
          }
      },
      mounted(){
        window.scrollTo(0,0)
      },
      methods:{
        onRefresh(){
          this.finished = false;
          this.loading = true;
          this.params.page = 1;
          this.list = []
          this.init();
        },
        async init(){
          http.get(api.recruitmentList, this.params).then((res) => {
            const { code,data,message } = res;
            if (code == "200"){
              if (data.items == 0){
                this.list = [];
                this.finished = true;
              }
              this.headerlogo = data.headert_logo
              this.list.push(...data.items)
              this.total = data.total
              this.loading = false;

              if (this.list.length >= this.total) {
                this.finished = true;
              }
              this.refreshing = false
              this.params.page++

            } else {
              this.$toast.fail(message)
            }
          }).catch(() => {})
        },
        onLoad(){
          this.init();
        },
        listClick(id){
          this.$router.push({
            name:"dailyDetail",
            query:{
              id:id
            }
          })
        }
      }
    }
</script>

<style lang="scss" scoped>
  .box{
    background: #e8ebff;
    min-height: calc(100vh - 53px);
  }
.listHead{
  width: 100%;
  height: 200px;
  position: relative;
  background: url("../../assets/images/dailyListImg.png") no-repeat 0 0;
  background-size: 100%;
  .title{
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 15px;
    margin: auto;
    font-size: 13px;
    color: #fff;
  }
  img{
    width: 100%;
  }
}
  .list{
    padding: 0 20px 0;
    box-sizing: border-box;
    min-height: 500px;
    margin-top: -25px;
  }
  .listCard{
    width: 100%;
    padding: 10px;
    background: #ffffff;
    border-radius: 6px;
    color: #616161;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    .listImg{
      width: 100px;
      height: 60px;
      flex-shrink: 0;
      border-radius: 4px;
      background-size: cover;
      background: #f7f8f9;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .listCon{
      display: flex;
      flex-direction: column;
      margin-left: 14px;
      width: 100%;
      overflow: hidden;
      .listTitle{
        display: block;
        width: 100%;
        font-size: 16px;
        margin-bottom: 10px;
        color: #444444;
        font-weight: 600;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .listNum{
        b{
          font-weight: normal;
        }
        .color1{
          color: #ff8007;
        }
        .color2{
          color: #2467f6;
        }
      }
    }
  }
  .footer{
    text-align: center;
    font-size: 10px;
    color: #5f5f5f;
    padding: 15px 0 8px;
  }

</style>
<style>
  .list .van-list__finished-text{
    font-size: 10px;
    color: #aaa;
    line-height: 2;
  }
</style>
